<template>
  <div class="add-container">
      <el-form class="add-panel" :model="formData" :rules="rules">
          <div class="add-input">
          <el-form-item class="form-item" label-width="120px" label="劳务公司名称：" prop="name">
            <el-autocomplete
              style="width:100%"
              v-model="formData.name"
              :fetch-suggestions="querySearchAsync"
              :trigger-on-focus="false"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label-width="120px" class="search-time" label="参与项目时间：" prop="startToEnd">
            <el-date-picker
              style="width:100%"
              v-model="formData.startToEnd"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          </div>
          <el-form-item class="form-item" label="  劳务公司介绍：" prop="notes">
            <br>
            <quill-editor
              class="editor"
              ref="myTextEditor"
              v-model="formData.notes"
              :options="editorOption"
              @change="onEditorChange($event)"
            >
            </quill-editor>
            <!-- <tinymce :height="300" v-model="formData.notes"/> -->
          </el-form-item>
          <el-form-item class="add-btn">
           <el-button type="primary" @click="onSubmit"> 提交 </el-button>
           <!-- <el-button @click="importCorp"> 去批量导入 <i class="el-icon-right"/> </el-button> -->
          </el-form-item>
      </el-form>
    </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import corp from'@/api/corp.js'

export default {
  components:{Tinymce},
  data(){
    return{
      formData:{
        name:'',
        startToEnd:[],
        notes:''
      },
      infos:[],
      timeout:  null,
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: ['blur','change'] }
        ],
        startToEnd: [
          { type:'array', required: true, message: "请选择参与项目时间",trigger:['blur','change']}]
      },
      //page:'添加',
      corporationId:this.$route.params.id,
      projectId:localStorage.getItem('projectId'),
      message:'',
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加劳务公司介绍", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
    }
  },
  methods:{
    importCorp(){
      this.$router.push({path:'/corporation/import'})
    },
    check(){
      if(!this.formData.name){
        this.message = "请输入劳务公司名称";
        return false
      }else if(this.formData.startToEnd[0]==null){
        this.message = "请输入参与项目时间";
        return false
      }
    },
    onEditorChange(event){
      console.log(event)
      // console.log("this.formData.introduce:"+this.formData.introduce)
    },
    onSubmit() {
      if(this.check()==false){
        this.$message.error(this.message);
      }else{
        var formData=this.formData
        if(this.$route.params && this.$route.params.id){
          corp.update(formData.startToEnd[1],formData.name,formData.notes,this.projectId,this.corporationId,formData.startToEnd[0]).then(res=>{
            this.$message({
              type: "success",
              message: res.message,
            });
            this.$router.push({path:'/corporation/list'})
          }).catch(res=>{
            this.$message({
              type: "error",
              message: res.message,
            });
          })
        }else{
          corp.insert(formData.startToEnd[1],formData.name,formData.notes,this.projectId,formData.startToEnd[0]).then(res=>{
            this.$message({
              type: "success",
              message: res.message,
            });
            this.$router.push({path:'/corporation/list'})
          }).catch(res=>{
            this.$message({
              type: "error",
              message: res.message,
            });
          })
        }
      }
    },
    loadAll(){
      const data = {
        currentPage:null,
        endTime:null,
        id:null,
        pageSize:null,
        searchInput:null,
        startTime:null,
      }
      corp.list().then(res=>{
        var resData=res.data.data
        var infos=this.infos
        resData.forEach(function(item){
          infos.push({value:item.name,notes:item.notes,personNum:item.personNum})
        })
        console.log(infos);
        this.infos=infos
      })
    },
    querySearchAsync(queryString,cb) {
      var infos = this.infos
      var results = queryString ? infos.filter(this.createStateFilter(queryString)) : infos;
      clearTimeout(this.timeout);
      this.timeout=setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (item) => {
        return (item.value.toLowerCase().indexOf(queryString.toLowerCase())>=0 );
      };
    },
    handleSelect(item) {
      console.log('item',item);
      this.formData.name=item.value
      this.formData.notes=item.notes
      this.formData.personNum=item.personNum
      console.log(this.formData);
    },
    getFromList(){
      var corporationId = this.corporationId
      if(this.$route.params && this.$route.params.id){
        var startToEnd = this.formData.startToEnd
        corp.detail(corporationId).then(res=>{
          this.formData.name=res.data.data.name
          startToEnd.push(res.data.data.startTime)
          startToEnd.push(res.data.data.endTime)
          this.formData.notes=res.data.data.notes
          this.formData.startToEnd=startToEnd
        })
      }
    }
  },
  mounted(){
    this.loadAll();
  },
  created(){
    this.getFromList();
  }
}
</script>

<style lang="scss">
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
}

.ql-editor {
    min-height: 300px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-snow .ql-picker.ql-size {
    width: 65px;
}
</style>